<template>
  <!-- 清算账户自动拆借管理审核明细页面弹出框-->
  <el-dialog
    title="清算账户自动拆借管理审核明细"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="detailsForm" :model="formData" label-width="150px">
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>清算账户自动拆借管理申请录入信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="交易流水号：" prop="id">
              <el-input v-model="formData.id" placeholder="交易流水号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="CPG日期：" prop="vdate">
              <el-date-picker
                disabled
                v-model="formData.vdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workdate">
              <el-date-picker
                disabled
                v-model="formData.workdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拆入清算行行号：" prop="cStBrno">
              <el-input v-model="formData.cStBrno" placeholder="拆入清算行行号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拆入清算行行名：" prop="cStBrnoName">
              <el-input v-model="formData.cStBrnoName" placeholder="拆入清算行行名" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拆出清算行行号：" prop="dStBrno">
              <el-input v-model="formData.dStBrno" placeholder="拆出清算行行号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拆出清算行行名：" prop="dStBrnoName">
              <el-input v-model="formData.dStBrnoName" placeholder="拆出清算行行名" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="自动拆借管理类型：" prop="cdMngType">
              <el-select v-model="formData.cdMngType" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.CD_MNG_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拆借协议号：" prop="protoNum">
              <el-input v-model="formData.protoNum" placeholder="拆借协议号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="拆借金额下限币种：" prop="lowerCurcd">
              <el-input v-model="formData.lowerCurcd" placeholder="拆借金额下限币种" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拆借金额下限：" prop="amtLowerLmt">
              <el-input v-model="formData.amtLowerLmt" placeholder="拆借金额下限" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="拆借金额上限币种：" prop="upperCurcd">
              <el-input v-model="formData.upperCurcd" placeholder="拆借金额上限币种" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拆借金额上限：" prop="amtUpperLmt">
              <el-input v-model="formData.amtUpperLmt" placeholder="拆借金额上限" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" v-if="formData.cdMngType != 'PC00'">
          <el-col :span="12">
            <el-form-item label="恢复金额币种：" prop="curcd">
              <el-input v-model="formData.curcd" placeholder="恢复金额币种" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="恢复金额：" prop="amount">
              <el-input v-model="formData.amount" placeholder="恢复金额" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remarks">
              <el-input type="textarea" v-model="formData.remarks" placeholder="备注" show-word-limit disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="录入操作员：" prop="mdTlrno">
              <el-input v-model="formData.mdTlrno" placeholder="录入操作员" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间：" prop="mdTime">
              <el-date-picker
                disabled
                v-model="formData.mdTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder="选择时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!formData.id375">
          <el-col :span="24">
            <el-form-item label="审核附言：" prop="audRemarks">
              <el-input
                type="textarea"
                v-model="formData.audRemarks"
                placeholder="审核附言"
                maxlength="128"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card" v-if="formData.id375">
        <div slot="header" class="label-header-msg">
          <span>清算账户自动拆借管理申请应答录入</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="交易流水号：" prop="id375">
              <el-input v-model="formData.id375" placeholder="交易流水号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="CPG日期：" prop="cpgdate375">
              <el-date-picker
                disabled
                v-model="formData.cpgdate375"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workDate375">
              <el-date-picker
                disabled
                v-model="formData.workDate375"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="发起参与机构号：" prop="directSender">
              <el-input v-model="formData.directSender" placeholder="发起参与机构号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="发起参与机构名称：" prop="directSenderName">
              <el-input v-model="formData.directSenderName" placeholder="发起参与机构名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接收参与机构号：" prop="directRecver">
              <el-input v-model="formData.directRecver" placeholder="接收参与机构号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接收参与机构名称：" prop="directRecverName">
              <el-input v-model="formData.directRecverName" placeholder="接收参与机构名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="原报文标识号：" prop="oriPkgId">
              <el-input v-model="formData.oriPkgId" placeholder="原报文标识号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="原发起参与机构：" prop="oriSender">
              <el-input v-model="formData.oriSender" placeholder="原发起参与机构" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="原发起参与机构名称：" prop="oriSenderName">
              <el-input v-model="formData.oriSenderName" placeholder="原发起参与机构名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务回执状态：" prop="bizStatus">
              <el-select v-model="formData.bizStatus" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.ACTNO_PROC_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务拒绝处理码：" prop="bizRejectCode">
              <el-select v-model="formData.bizRejectCode" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  :label="`${formData.bizRejectCode ? formData.bizRejectCode : ''}${formData.bizRejectCodeDesc ? '-' + formData.bizRejectCodeDesc : ''}`"
                  :value="formData.bizRejectCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务拒绝信息：" prop="bizRejectInfo">
              <el-input v-model="formData.bizRejectInfo" placeholder="业务拒绝信息" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remarks375">
              <el-input type="textarea" v-model="formData.remarks375" placeholder="备注" show-word-limit disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="录入操作员：" prop="mdTlrno375">
              <el-input v-model="formData.mdTlrno375" placeholder="录入操作员" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间：" prop="mdTime375">
              <el-date-picker
                disabled
                v-model="formData.mdTime375"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder="选择时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.id375">
          <el-col :span="24">
            <el-form-item label="审核附言：" prop="audRemarks">
              <el-input
                type="textarea"
                v-model="formData.audRemarks"
                placeholder="审核附言"
                maxlength="128"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="approveFn" :loading="isLoading">审批</el-button>
      <el-button type="warning" @click="rejectFn" :loading="isLoading">拒绝</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { approve, reject } from "@/api/cnaps/saps/clearAcctAutoMng/clear_manage_approve.js";
export default {
  name: "ApproveDetails",
  components: {},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      isLoading: false,
    };
  },
  mounted() {},
  methods: {
    // 审批方法
    approveFn() {
      this.isLoading = true;
      let sendData = {};
      if (this.formData.id375) {
        sendData = _.clone(this.formData);
      } else {
        sendData = {
          id: this.formData.id,
          vdate: this.formData.vdate,
          workdate: this.formData.workdate,
          cStBrno: this.formData.cStBrno,
          cStBrnoName: this.formData.cStBrnoName,
          dStBrno: this.formData.dStBrno,
          dStBrnoName: this.formData.dStBrnoName,
          cdMngType: this.formData.cdMngType,
          protoNum: this.formData.protoNum,
          lowerCurcd: this.formData.lowerCurcd,
          amtLowerLmt: this.formData.amtLowerLmt,
          upperCurcd: this.formData.upperCurcd,
          amtUpperLmt: this.formData.amtUpperLmt,
          curcd: this.formData.curcd,
          amount: this.formData.amount,
          remarks: this.formData.remarks,
          mdTlrno: this.formData.mdTlrno,
          mdTime: this.formData.mdTime,
          audRemarks: this.formData.audRemarks,
        };
      }
      approve(sendData)
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已审批!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 拒绝方法
    rejectFn() {
      this.isLoading = true;
      let sendData = {};
      if (this.formData.id375) {
        sendData = _.clone(this.formData);
      } else {
        sendData = {
          id: this.formData.id,
          vdate: this.formData.vdate,
          workdate: this.formData.workdate,
          cStBrno: this.formData.cStBrno,
          cStBrnoName: this.formData.cStBrnoName,
          dStBrno: this.formData.dStBrno,
          dStBrnoName: this.formData.dStBrnoName,
          cdMngType: this.formData.cdMngType,
          protoNum: this.formData.protoNum,
          lowerCurcd: this.formData.lowerCurcd,
          amtLowerLmt: this.formData.amtLowerLmt,
          upperCurcd: this.formData.upperCurcd,
          amtUpperLmt: this.formData.amtUpperLmt,
          curcd: this.formData.curcd,
          amount: this.formData.amount,
          remarks: this.formData.remarks,
          mdTlrno: this.formData.mdTlrno,
          mdTime: this.formData.mdTime,
          audRemarks: this.formData.audRemarks,
        };
      }
      reject(sendData)
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已拒绝!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 表单重置
    reset() {
      this.resetForm("detailsForm");
      // this.$set(this, "form", {});
    },
    closeFn() {
      this.open = false;
      this.reset();
    },
    show() {
      this.open = true;
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
